<template>
  <div class="layout">
    <div class="header">
      <Menu
        mode="horizontal"
        theme="light"
        :active-name="activeIndex"
        @on-select="onClick"
      >
        <div class="layout-logo" @click="handleBackToPortal">个人网站</div>
        <div class="layout-nav">
          <MenuItem :name="i" v-for="(item, i) in apps" :key="i">
            <Icon :type="item.meta.icon"></Icon>
            {{ item.meta.title }}
          </MenuItem>
          <Dropdown @on-click="handleDropClick">
            <a href="javascript:void(0)">
              <Icon type="md-person" />
              {{ userInfo.username }}
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="登出">
                <Icon type="md-power" />登出
              </DropdownItem>
              <DropdownItem name="修改密码">
                <Icon type="md-create" />修改密码
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </Menu>
    </div>

    <div class="main-con" id="micro_app"></div>

    <div class="iframe-con" v-show="showIframe">
      <iframe
        ref="iframeComp"
        :src="iframeUrl"
        style="width: 100%; height: 100%; overflow: hidden; border: none"
      ></iframe>
      <span class="back-icon" @click="handleBack">
        <Icon type="ios-close-circle-outline" />
      </span>
      <Spin fix v-show="loading"></Spin>
    </div>
    <Spin fix v-show="loading"></Spin>
  </div>
</template>
<script>
export default {
  name: "Layout",
  data() {
    return {
      userInfo: this.$store.getters.userInfo,
      showIframe: false,
      iframeUrl: "",
    };
  },
  computed: {
    loading() {
      return this.$store.getters.loading;
    },
    activeIndex() {
      let index = 0;
      this.apps.forEach((item, i) => {
        if (item.name == this.$route.matched[0].name) {
          index = i;
        }
      });
      return index;
    },
    apps() {
      return this.$store.getters.resource.map((item) => {
        return {
          ...item,
          children: [],
        };
      });
    },
  },

  watch: {
    $route() {
      this.initLayout();
    },
  },
  mounted() {
    this.initLayout();
    let iframe = this.$refs.iframeComp;
    if (iframe.attachEvent) {
      iframe.attachEvent("onload", () => {
        console.log("iframe已加载完毕");
        this.$store.commit("loading", false);
      });
    } else {
      iframe.onload = () => {
        console.log("iframe已加载完毕");
        this.$store.commit("loading", false);
      };
    }
  },
  beforeDeatroy() {
    this.$refs.iframeComp.removeEventHanler("onload");
  },
  methods: {
    handleBackToPortal() {
      this.$router.push({
        name: "Portal",
      });
    },

    initLayout() {
      let name = this.$route.name;
      this.apps.forEach((item, i) => {
        if (item.name == name) {
          if (item.meta.appType == "iframe") {
            this.iframeUrl = item.meta.entry;
            this.showIframe = true;
          }
        }
      });
    },
    logOut() {
      this.$store.dispatch("logOut");
      this.$router.push({
        name: "Login",
      });
    },
    handleDropClick(name) {
      switch (name) {
        case "登出":
          this.logOut();
          break;
        case "修改密码":
          break;
      }
    },
    onClick(i) {
      this.$store.commit("loading", true);
      let data = this.apps[i];
      if (data.appType == "iframe") {
        this.iframeUrl = data.entry;
        this.showIframe = true;
      }

      this.$router.push({
        name: data.name,
      });
    },

    handleBack() {
      this.showIframe = false;
      this.$router.push({
        name: "Portal",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .main-con {
    width: 100%;
    flex: 1;
    border: none;
    overflow: hidden;
  }
  .main-con:first-child {
    height: 100%;
  }
  .iframe-con {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    border: none;
    z-index: 999;
    left: 0;
    overflow: hidden;
    .back-icon {
      position: absolute;
      top: 0;
      right: 23px;
      font-size: 20px;
      cursor: pointer;
    }
    .back-icon:hover {
      color: blue;
    }
  }
}
.ivu-layout {
  height: 100%;
}
.root-view {
  width: 100%;
  height: calc(100% - 60px);
}

.root-view > :first-child {
  height: 100%;
}
.layout-logo {
  width: 100px;
  height: 30px;
  line-height: 30px;
  /* background: #5b6270; */
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}
.layout-nav {
  margin: 0 auto;
  margin-right: 50px;
  height: 100%;
  text-align: right;
}
.ivu-menu-horizontal .ivu-menu-item {
  float: unset;
  display: inline-block;
}
::v-deep {
  .ivu-select-dropdown {
    text-align: left;
    .ivu-icon {
      margin-right: 10px;
    }
  }
}
</style>
